<template>
  <van-popup :show="show" round position="bottom" @close="close" closeable custom-style="height: 1200rpx;background: #f5f5f5;" safe-area-inset-bottom lock-scroll>
    <view class="coupon">
      <view class="coupon-page-title">优惠券</view>
      <view class="coupon-list">
        <view class="couponItem" v-for="(item, index) in couponList" :key="item.couponTemplateId">
          <couponItem pageName="goodsDetail" :coupon="item" :index="index" @click.native="debounceUse(item, index)"></couponItem>
        </view>
      </view>
    </view>
  </van-popup>
</template>
<script>
import couponItem from "./coupon.vue";
import marketServer from "@/api/market";

export default {
  components: { couponItem },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    storeId: {
      type: Number,
      default: 0,
    },
    skuId: {
      type: Number,
      default: 0,
    },
    skuIdList: {
      type: Array,
    },
    sourcePage: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      // receivableCouponList: [], // 可用
      // receivedCouponList: [], // 已领取
      couponList: [],
      debounceUse: this.debounce(this.use, { msg: "请勿太过频繁点击" }),
    };
  },
  mounted() {
    if (this.storeId) {
      this.getCouponList();
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
    async getCouponList() {
      const params = { storeId: this.storeId, sourcePage: this.sourcePage };
      this.skuId && (params.skuId = this.skuId);
      this.skuIdList && this.skuIdList.length > 0 && (params.skuIdList = this.skuIdList.join());
      const res = await marketServer.getReceivableCouponList(params);
      if (res.status === 1) {
        this.couponList = res.data.receivableCouponList;
      }
    },
    // 领取优惠券
    async use({ id, couponTemplateId, userCouponStatus }, index) {
      const token = uni.getStorageSync("yl-token");
      if (!token) {
        this.gLogin(-1);
        return;
      }
      if (userCouponStatus === 1) {
        uni.navigateTo({
          url: `/pages-member/coupon/couponGoodsList?couponTemplateId=${couponTemplateId}&couponId=${id}`,
        });
        return;
      }
      const { status, data, msg } = await marketServer.saveReceiveCoupon({
        couponTemplateId,
        skuId: this.skuId,
      });

      if (status !== 1) {
        uni.showToast({ title: msg, icon: "none" });
        return;
      }
      uni.showToast({ title: "领取成功", icon: "success" });
      this.$set(this.couponList, index, data.coupon);
    },
  },
};
</script>

<style lang="scss" scoped>
// @import "../style.scss";
.coupon {
  background: #f5f5f5;
  &-list {
    overflow-y: scroll;
    height: 1020rpx;
    padding-bottom: 40rpx;
  }
  &-page {
    background: #f5f5f5;
    overflow: hidden;
    height: 1200rpx;
    &-title {
      height: 110rpx;
      line-height: 110rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #242d4a;
      background: #fff;
      padding-left: 30rpx;
      border-bottom: 1px solid #ececec;
      box-sizing: border-box;
    }
  }
}
.couponItem {
  margin: 20rpx 0;
}
</style>
